<!-- Google Maps toolbar and this basic implementation page are from http://nettique.free.fr/gmap/toolbar.html -->
<!-- Modified to be used as a source of map overlay features to give a test / demonstration of shapefile
	 export javascript code by Harry Gibson -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>google map draw features and export to shapefile</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
   <style type="text/css">
body {
  font-family: Arial, sans serif;
  font-size: 11px;
}
#hand_b {
  width:31px;
  height:31px;
  background-image: url(http://google.com/mapfiles/ms/t/Bsu.png);
}
#hand_b.selected {
  background-image: url(http://google.com/mapfiles/ms/t/Bsd.png);
}

#placemark_b {
  width:31px;
  height:31px;
  background-image: url(http://google.com/mapfiles/ms/t/Bmu.png);
}
#placemark_b.selected {
  background-image: url(http://google.com/mapfiles/ms/t/Bmd.png);
}

#line_b {
  width:31px;
  height:31px;
  background-image: url(http://google.com/mapfiles/ms/t/Blu.png);
}
#line_b.selected {
  background-image: url(http://google.com/mapfiles/ms/t/Bld.png);
}

#shape_b {
  width:31px;
  height:31px;
  background-image: url(http://google.com/mapfiles/ms/t/Bpu.png);
}
#shape_b.selected {
  background-image: url(http://google.com/mapfiles/ms/t/Bpd.png);
}
</style>

<script type="text/javascript" src="js/mapToolbar.js">
/* Gmaps toolbar script from nettique.free.fr */
</script>
<script type="text/javascript" src ="../lib/FileSaveTools.js">
/* File saving helper, also includes BlobBuilder, and loads FileSaver, JSZip, downloadify, jDataView_Write */
</script>
<script type="text/javascript" src="../src/JS2Shapefile.js">
/* Main shapefile creation class */
</script>

  </head>
<body>
<h1>google maps -> draw features -> export to shapefile</h1>
<table><tr style="vertical-align:top">
  <td style="width:15em">

<table><tr>
<td><div id="hand_b"
	 onclick="MapToolbar.stopEditing()"/></td>
<td><div id="placemark_b"
onclick="MapToolbar.initFeature('placemark')"/></td>
<td><div id="line_b"
	 onclick="MapToolbar.initFeature('line')"/></td>
<td><div id="shape_b"
	onclick="MapToolbar.initFeature('shape')"/></td>
</tr></table>

    <input type="hidden" id="featuredetails" rows=2>
	<p>click on an icon to add a feature.
	click on the 'hand' icon to stop line edition or shape edition
	click on the name of the feature on the sidebar to edit it again.
	</p>
<button onclick = "exportShapefiles()">Export shapefiles!</button>
    </input>

     <table id ="featuretable">
     <tbody id="featuretbody"></tbody>
    </table>
  </td>
  <td>
    <!-- The frame used to measure the screen size -->
    <!-- <div id="frame"></div>  -->

    <div id="map" style="width: 700px; height: 550px"></div>
  </td>
</tr></table>
<div id="saveButtons"></div>
<script type="text/javascript">
  initialize();
  function exportShapefiles(){
  	var shapewriter = new Shapefile();
	var googleGraphics = [];
	for (var g in MapToolbar.features.placemarkTab){
		if (MapToolbar.features.placemarkTab.hasOwnProperty(g)){
			googleGraphics.push(MapToolbar.features.placemarkTab[g]);
		}
	}
	for (var g in MapToolbar.features.lineTab){
		if (MapToolbar.features.lineTab.hasOwnProperty(g)){
			googleGraphics.push(MapToolbar.features.lineTab[g]);
		}
	}
	for (var g in MapToolbar.features.shapeTab){
		if (MapToolbar.features.shapeTab.hasOwnProperty(g)){
			googleGraphics.push(MapToolbar.features.shapeTab[g]);
		}
	}
	shapewriter.addGoogleGraphics(googleGraphics);
	var pointfile = shapewriter.getShapefile("POINT");
	var linefile = shapewriter.getShapefile("POLYLINE");
	var polygonfile = shapewriter.getShapefile("POLYGON");
	if (pointfile.successful){
		var saver = new BinaryHelper();
		for (var actualfile in pointfile['shapefile']){
			if (pointfile['shapefile'].hasOwnProperty(actualfile)){
				saver.addData({
					filename: "points_from_gmaps",
					extension: actualfile,
					datablob: pointfile['shapefile'][actualfile]
				});
			}
		}
		var div = document.createElement("div");
		div.id = "pointButtonDiv";
		div.innerHTML = "Points:";
		document.getElementById("saveButtons").appendChild(div);
		saver.createSaveControl("pointButtonDiv",true);
	}
	if (linefile.successful){
		var saver = new BinaryHelper();
		for (var actualfile in linefile['shapefile']){
			if (linefile['shapefile'].hasOwnProperty(actualfile)){
				saver.addData({
					filename: "lines_from_gmaps",
					extension: actualfile,
					datablob: linefile['shapefile'][actualfile]
				});
			}
		}
		var div = document.createElement("div");
		div.id = "lineButtonDiv";
		div.innerHTML = "Lines:";
		document.getElementById("saveButtons").appendChild(div);
		saver.createSaveControl("lineButtonDiv",true);
	}
	if (polygonfile.successful){
		var saver = new BinaryHelper();
		for (var actualfile in polygonfile['shapefile']){
			if (polygonfile['shapefile'].hasOwnProperty(actualfile)){
				saver.addData({
					filename: "polygons_from_gmaps",
					extension: actualfile,
					datablob: polygonfile['shapefile'][actualfile]
				});
			}
		}
		var div = document.createElement("div");
		div.id = "polygonButtonDiv";
		div.innerHTML = "Polygons:";
		document.getElementById("saveButtons").appendChild(div);
		saver.createSaveControl("polygonButtonDiv",true);
	}
  }
</script>
</body>
</html>
